<template>
  <div class="userInfo">
    <div class="headFixed">
      <div class="headPhoto" v-if="!progressFlag">
        <img src alt />
      </div>
      <div v-show="progressFlag" class="headPhoto">
        <el-progress type="circle" :width=60 :percentage="progressPercent"></el-progress>
      </div>
      <el-upload
        class="img-btn"
        action="#"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :http-request="uploadImg"
      >
        <el-button type="primary" round>更改头像</el-button>
      </el-upload>
    </div>

    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="用户名">
        <el-col :span="12">
          <el-input v-model="form.nickName" placeholder="请输入用户名"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item
        label-width="130px"
        label="年龄"
        prop="age"
        :rules="[
            { required: true, message: '年龄不能为空'},
            { type: 'number', message: '年龄必须为数字值'}
        ]"
      >
        <el-col :span="6">
          <el-input type="age" v-model.number="form.age" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item
        prop="email"
        label="邮箱"
        :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
      >
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-col :span="12">
          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button style="marginRight:20px" type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="exit">退出</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var checkphone = (rule, val, callback) => {
        console.log(rule,val)
      if (val == "") {
        callback(new Error("请输入手机号"));
      } else if ((!/^1(3|4|5|6|7|8)\d{9}$/.test(val))) {
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback();
      }
    };
    return {
      rules: {
        phone: [{ required: true, validator: checkphone, trigger: "blur" }] //validator: checkphone是验证手机的引入checkphone函数
      },
      form: {
        nickName: sessionStorage.getItem("username"),
        age: null,
        email: "19454645@163.com",
        phone: "16959656565"
      },
      progressFlag: false,
      progressPercent:0
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    exit() {
      this.$router.back();
    },
    uploadImg(f) {
      console.log(f);
      this.progressFlag = true;
      let formdata = new FormData();
      formdata.append("image", f.file);
      axios({
        url: baseURL + "/image",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" },
        onUploadProgress: progressEvent => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小
          this.progressPercent =
            (progressEvent.loaded / progressEvent.total) * 100;
        }
      })
        .then(res => {
          this.imageUrl = res.data.data;
          if (this.progressPercent === 100) {
            this.progressFlag = false;
            this.progressPercent = 0;
          }
        })
        .then(error => {
          console.log(error);
        });
    },
    // 上传图片前的过滤
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style lang="less" scoped>
.userInfo {
  width: 60%;
  padding: 5% 20%;
  .headFixed {
    padding: 30px;
    display: flex;
    align-items: center;
    .headPhoto {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #000;
      overflow: hidden;
      margin-right: 45px;
    }
  }
}
/deep/.el-form-item__label {
  text-align: center;
}
</style>